<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        button { padding: 10px 15px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #0056b3; }
        pre { background: #f8f9fa; padding: 10px; border-radius: 3px; overflow-x: auto; }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <h1>API测试页面</h1>
    
    <div class="test-section">
        <h2>用户认证测试</h2>
        <button onclick="testLogin()">测试登录</button>
        <button onclick="testRegister()">测试注册</button>
        <button onclick="testGetUser()">测试获取用户信息</button>
        <div id="authResult"></div>
    </div>
    
    <div class="test-section">
        <h2>视频API测试</h2>
        <button onclick="testGetAllVideos()">获取所有视频</button>
        <button onclick="testCreateVideo()">创建视频</button>
        <button onclick="testGetVideoById()">获取单个视频</button>
        <div id="videoResult"></div>
    </div>

    <script>
        async function testLogin() {
            try {
                const response = await fetch('/api/users/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        email: 'test@example.com',
                        password: 'password123'
                    })
                });
                
                const result = await response.json();
                document.getElementById('authResult').innerHTML = 
                    '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
            } catch (error) {
                document.getElementById('authResult').innerHTML = 
                    '<p class="error">错误: ' + error.message + '</p>';
            }
        }

        async function testRegister() {
            try {
                const response = await fetch('/api/users/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: 'testuser',
                        email: 'test@example.com',
                        password: 'password123'
                    })
                });
                
                const result = await response.json();
                document.getElementById('authResult').innerHTML = 
                    '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
            } catch (error) {
                document.getElementById('authResult').innerHTML = 
                    '<p class="error">错误: ' + error.message + '</p>';
            }
        }

        async function testGetUser() {
            try {
                const response = await fetch('/api/users/me', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const result = await response.json();
                document.getElementById('authResult').innerHTML = 
                    '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
            } catch (error) {
                document.getElementById('authResult').innerHTML = 
                    '<p class="error">错误: ' + error.message + '</p>';
            }
        }

        async function testGetAllVideos() {
            try {
                const response = await fetch('/api/videos', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const result = await response.json();
                document.getElementById('videoResult').innerHTML = 
                    '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
            } catch (error) {
                document.getElementById('videoResult').innerHTML = 
                    '<p class="error">错误: ' + error.message + '</p>';
            }
        }

        async function testCreateVideo() {
            try {
                const response = await fetch('/api/videos', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        title: '测试视频',
                        description: '这是一个测试视频',
                        videoUrl: 'https://example.com/video.mp4',
                        thumbnail: 'https://example.com/thumbnail.jpg',
                        userId: 1
                    })
                });
                
                const result = await response.json();
                document.getElementById('videoResult').innerHTML = 
                    '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
            } catch (error) {
                document.getElementById('videoResult').innerHTML = 
                    '<p class="error">错误: ' + error.message + '</p>';
            }
        }

        async function testGetVideoById() {
            try {
                const response = await fetch('/api/videos/1', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const result = await response.json();
                document.getElementById('videoResult').innerHTML = 
                    '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
            } catch (error) {
                document.getElementById('videoResult').innerHTML = 
                    '<p class="error">错误: ' + error.message + '</p>';
            }
        }
    </script>
</body>
</html> 